import React, { useEffect, useState } from 'react';
import { Layout, Table, Progress,Card,Space,Input, message} from 'antd';
import { getStudentLearnProcessAPI } from '@/api/admin';
import { getUserId } from '@/utils/userId';
const { Search } = Input;

const { Header, Content, Footer } = Layout;

const StudentLearningProcess = () => {
  const [loading, setLoading] = useState(false);
  const [learnProcessData,setLearnProcessData] = useState([])
  const [name,setName] =useState('')
  const [userId,setUserId] = useState('')

  // useEffect(async()=>{
  //   console.log('用户id',userId)
  //  const res= await getLearnProcessAPI(getUserId())
  //  console.log(res.data)
  //  setLearnProcessData(res.data)
  // },[])



  const columns = [
    {
      title: '课程名称',
      dataIndex: 'courseName',
      key: 'courseName',
    },
    {
      title: '学习进度',
      dataIndex: 'progress',
      key: 'progress',
      render: (text, record) => (
        <Progress percent={parseInt(text)} status="active" />
      ),
    },
    {
      title: '学时统计',
      dataIndex: 'hours',
      key: 'hours',
      render: (text, record) => (
        <span>{text} 学时</span>
      ),
    },
  ];

  const data = [
    {
      key: 's1',
      courseName: '科目一',
      progress: '80',
      hours: '12',//12
    },
    {
      key: 's2',
      courseName: '科目二',
      progress: '70',
      hours: '26',//26
    },
    {
      key: 's3',
      courseName: '科目三',
      progress: '60',
      hours: '24',//24
    },
    {
      key: 's4',
      courseName: '科目四',
      progress: '60',
      hours: '16',//16
    }
  ];

  const fetchData = () => {
    // Simulate fetching data
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
    }, 2000);
  };

  const onSearch = async(value, _e, info) => {
    const res= await getStudentLearnProcessAPI(value)
    // console.log(value)
    // await dispatch(fetchSearchUserInfo(value,'coach'))
    // const res=getSearchStudentInformation()
    // setSearchData(res)
    setUserId(value)
    setName(res.data.name)
    setLearnProcessData(res.data.subject)
    message.success('搜索成功！')
  }

  return (
    <Layout>
      <Header style={{ color: 'white' }}>学习过程管理</Header>
      <Content style={{ padding: '10 50px' }}>
        <Card>
        <Space direction="vertical">
    <Search
      placeholder="请输入学员学号"
      onSearch={onSearch}
      style={{
        width: 200,
      }}
    /></Space>
        </Card>
      
        <div style={{ background: '#fff', padding: 24, minHeight: 280 }}>
          <Card>
            <Card><span>学员学号：{userId}</span>  <span style={{position:'relative',left:'390px'}}>姓名：{name}</span> </Card>
          <Table columns={columns} dataSource={learnProcessData} loading={loading} />
          </Card>
          
        </div>
        {/* <Card>
          <h3>课程表</h3>
        <div><CourseSchedule student_id={userId}/></div>
        </Card> */}
        {/* <div style={{position:'relative',top:'5px',left:'40px'}}>驾校管理系统&copy;2024-2099</div> */}
      </Content>
      {/* <Footer>
     <div style={{position:'absolute',left:'50%'}}>驾校管理系统</div>
   </Footer> */}
   <Footer>
     <div style={{position:'absolute',left:'50%'}}>驾校管理系统&copy;2024-2099</div>
   </Footer>
    </Layout>
  );
};

export default StudentLearningProcess;